<template>
    <div class="myTaskList tabBarPage">
        <div class="haedNav">
            <van-nav-bar
                    :border="false"
                    title="已领取任务"
                    left-arrow
                    fixed
                    @click-left="$navBack('prePath')">
                <van-icon name="search" slot="right" size="17" ><span class="manage">管理</span></van-icon>
            </van-nav-bar>
        </div>
        <div class="taskTabs text-black-pk ">
            <van-tabs v-model="taskTypeActive"
                      @click="handleTabs"
                      title-active-color="#D82D11"
                      :swipe-threshold="5"
                      background="#FFFFFF">
                <van-tab title="全部" name="0"></van-tab>
                <van-tab title="未缴纳" name="1"></van-tab>
                <van-tab title="进行中" name="2"></van-tab>
                <van-tab title="已完成" name="3"></van-tab>
                <!--<van-tab title="已失败" name="4"></van-tab>-->
            </van-tabs>
        </div>
        <div class="modelWrap">
            <div class="bag">
                <div class="itemList bg-white-pk">
                    <div v-for="(item,index) in modelSelect"
                         :key="index"
                         @click="handleModel(index)"
                         class="light-border-bottom-gray item">
                        <div v-if="index=='0'" class="d-flex-pk expandItem">
                            <div>{{item.tempName}}</div>
                            <div v-if="index=='0'" class="iconPosition">
                                <van-icon class-prefix="pk-icon" :name="isExpand? 'expandDown':'expandUp'" color="#D82D11" :size="isExpand? '12':'17'" ></van-icon>
                            </div>
                        </div>
                        <div v-else>{{item.name}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-pull-refresh v-model="isRefresh" @refresh="onRefresh" ref="">
            <van-list v-model="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了" @load="onLoad" ref="">
                <div class="taskWrap">
                    <div class="taskList">
                        <div v-for="(item,index) in taskReceiveList"
                             :key="index"
                             @click="taskDetail(item)"
                             class="taskItem page-pad-pk bg-white-pk">
                            <div class="light-border-bottom-gray itemPad">
                                <span class="bg-D82D11 text-white-pk modelName">{{taskTypeFmt(item.taskType)}}</span>
                               {{item.taskName}}
                            </div>
                            <div class="d-flex-pk light-border-bottom-gray itemPad">
                                <div class="itemLeft">任务时间:</div>
                                <div class="itemRight font-size-13-pk">{{item.beginTime}}至{{item.endTime}}</div>
                            </div>
                            <div class="d-flex-pk light-border-bottom-gray itemPad">
                                <div class="itemLeft">任务形式:</div>
                                <div class="itemRight">{{receiveJoinTypeFmt(item.receiveJoinType)}}</div>
                            </div>
                            <div class="d-flex-pk light-border-bottom-gray itemPad">
                                <div class="itemLeft">任务赏金:</div>
                                <div class="itemRight text-red-pk">{{item.taskReward}}</div>
                            </div>
                            <div class="taskStatus text-white-pk" :class="taskStatusBrgFmt(item.status)">
                                {{statusFmt(item.status)}}
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    const modelOptions=[
            {
                value: "",
                tempName: "综合",
                name: "综合",
                isSelect: false
            },
            {
                value: "0",
                name: "直接跑",
                isSelect: false
            },
            {
                value: "1",
                name: "一起跑",
                isSelect: false
            }
            /*,{
            value: "2",
            name: "我来跑",
            isSelect: false
            }*/
        ]
    export default {
        name: 'myTaskList',
        components: {},
        data() {
            return {
                page:this.$global.page,
                size:this.$global.size,
                pages:this.$global.pages,
                pageNum:1,
                total:0,
                testList:[1,2,3],
                taskTypeActive:0,
               search:{
                   taskType:"",
                   status: "",
               },
                modelOptions:JSON.parse(JSON.stringify(modelOptions)),
                modelSelect: [modelOptions[0]],
                expandShow:false,
                isExpand:false,
                taskReceiveList:[],
                isRefresh:false,
                loading:false,
                finished:false,
            }
        },
        mounted() {
            this.$toast.loading();
            this.getTaskReceiveList();
        },
        created() {
        },
        computed: {},
        watch: {},
        methods: {
            toBack(){
                this.$router.push({
                    name:'personalCenter'
                })
            },
            handleTabs() {
                this.taskStatus();
                this.$emit("change", this.search.status);
                this.getTaskReceiveList();
            },
            taskStatus() {
                //status:0未缴纳押金，1进行中，2已完成 3已结束
                switch (this.taskTypeActive) {
                    case "0":
                        this.search.status = "";
                        break;
                    case "1":
                        this.search.status =0;
                        break;
                    case "2":
                        this.search.status = 1;
                        break;
                    case "3":
                        this.search.status = 3;
                        break;
                   /* case "4":
                        this.search.status = 4;
                        break;*/
                }
            },
            taskStatusBrgFmt(status){
                //0未缴纳押金，1进行中，2已完成 3已结束
                let arr = [
                    {value: "0", name: "bg-FF6"},//红橙色
                    {value: "1", name: "bg-yellow"},//黄色
                    {value: "2", name: "bg-green-pk"},//绿色
                    {value: "3", name: "bg-red-pk"},//红色
                ];
                return this.$util.dictTranslate(arr, status)
            },
            statusFmt(status){
                let arr = [
                    {value: "0", name: "未缴纳"},//红橙色
                    {value: "1", name: "进行中"},//黄色
                    {value: "2", name: "已完成"},//绿色
                    {value: "3", name: "已结束"},//红色
                ];
                return this.$util.dictTranslate(arr, status)
            },
            //  taskType 任务类型：0：直接跑 1：一起跑
            taskTypeFmt(taskType){
                let arr = [
                    {value: "0", name: "直接跑"},
                    {value: "1", name: "一起跑"},
                ];
                return this.$util.dictTranslate(arr, taskType)
            },
            //领取任务的类型 0:表示所有，1，个人，2，团队
            receiveJoinTypeFmt(receiveJoinType){
                let arr = [
                    {value: "0", name: "所有"},
                    {value: "1", name: "个人"},
                    {value: "2", name: "团队"},

                ];
                return this.$util.dictTranslate(arr, receiveJoinType)
            },
            //展开
            handleModel(index) {
                if(!this.isExpand){
                    this.modelSelect = JSON.parse(JSON.stringify(modelOptions));
                }else {
                    //展开状态，点击选择
                    this.modelSelect = [this.modelOptions[0]];
                    this.search.taskType = this.modelOptions[index].value;
                    this.$toast.loading();
                    this.getTaskReceiveList();
                }
                this.isExpand = !this.isExpand;
                this.modelOptions[0].tempName = this.modelOptions[index].name;
            },
            getTaskReceiveList(type){
                this.$api.getTaskReceiveList({
                    "idList": [],
                    "taskType": this.search.taskType,
                    "modelId": "",
                    "page": this.page,
                    "size": this.size,
                    "status": this.search.status
                }).then(res=>{
                    this.$toast.clear();
                    this.loading=false;
                    let result=this.$resArr(res)
                    if(result){
                        this.total=parseInt(result.total);
                        this.pageNum=result.pageNum
                        this.pages=result.pages;
                        if(type==='load'){
                            this.taskReceiveList=this.taskReceiveList.concat(result.list)
                        }else{
                            this.taskReceiveList=result.list
                        }
                    }
                })
            },
            //上拉刷新
            onRefresh(){
                this.$toast({
                    message:"加载中..."
                })
                this.page=1;
                this.size=this.$global.size;
                this.getTaskReceiveList();
                this.isRefresh=false;
            },
            //下拉刷新
            onLoad(){
                if(this.page>=this.pages){
                    this.finished=true
                }else{
                    this.page++;
                    this.getTaskReceiveList('load')
                }

            },
            //任务详情
            taskDetail(item){
                this.$router.push({
                    path:"/task/taskDetail",query:{taskId:item.taskId}
                })
            },

        }
    }
</script>

<style lang="scss" scoped>
    .myTaskList {
        font-size: 14px;
        line-height: 2;
        .manage{
            padding-left: 10px;
            font-size: 14px;
        }
       /* .taskTabs {
            z-index: 100;
            top: 45px;
            right: 0;
            left: 0;
        }*/
        .iconExpand{
            padding-left: 10px;
        }
        .modelWrap{
            width: 100%;
            position: relative;
            .itemList{
                position: absolute;
                width: 100%;
                z-index: 1;
                padding:5px 20px ;
                .item{
                    padding: 5px 0;
                }
                .expandItem{
                    align-items: center;
                }
            }

            .iconPosition{
                padding-left: 5px;
            }
        }
        .taskWrap{
            margin: 10px;
            .taskList{
                .taskItem{
                    overflow: hidden;
                    position: relative;
                    margin: 10px 0;
                    padding-top: 10px;
                    padding-bottom: 10px;
                }
                .modelName{
                    padding:0 5px;
                    border-radius: 2px;
                    margin: 0 5px 0 0;
                }
                .itemLeft{
                    width: 80px;
                }
                .itemPad{
                    padding: 10px 0;
                }
                .taskStatus{
                    font-size: 13px;
                    line-height: 20px;
                    color: #FFFFFF;
                    position: absolute;
                    text-align: left;
                    top: 40px;
                    padding: 0 20px;
                    right: -16px;
                    transform-origin: top right;
                    transform: rotate(45deg);
                }

            }

        }
        .van-pull-refresh {
            padding-top: 55px;
        }
    }
</style>
